import React from 'react'
import moment from 'moment'
import MiniChartWidget from 'lib/components/MiniChartWidget.jsx'
import format from 'lib/util/format'

import {restPostApi} from '../apis/core-util';

export default class NetGridScope {
  constructor(container) {
    this.container = container;

    this.$state = {
      netGridColumns:[
        {
          key:'icon',
          className:'pure-u-1-24',
          containerStyle:{boxSizing:'border-box',height:'42px'},
          render:function(cellValue, rowValue, rowIndex, columnIndex){
            let extendedClass = 'state-dissatisfied';
            if (rowValue.avgResponseTime < 60) {
              extendedClass = 'state-satisfied';
            } else if (rowValue.avgResponseTime >= 60 && rowValue.avgResponseTime < 600) {
              extendedClass = 'state-tolerance';
            }

            return (
              <i className={'iconfont ' + extendedClass} style={{marginRight:'10px'}}></i>
            );
          }
        }, {
          title:'域名称',
          key:'domainName',
          className:'pure-u-8-24',
          containerStyle:{boxSizing:'border-box',height:'42px'},
          render:function(cellValue, rowValue, rowIndex, columnIndex){
            return (
              <a style={{whiteSpace:'nowrap'}}
                 href={BlueWare.pageUrlPrefix + '/app/' + BlueWare.appId + '/http#/domain/' + rowValue.domainId}>
                {cellValue}
              </a>
            );
          }
        }, {
          title:'响应时间趋势',
          key:'tendency',
          className:'pure-u-10-24',
          containerStyle:{boxSizing:'border-box',height:'42px'},
          render:cellValue=>cellValue?(<MiniChartWidget data={cellValue} />):null
        }, {
          title:'平均响应时间',
          key:'avgResponseTime',
          className:'pure-u-5-24',
          containerStyle:{boxSizing:'border-box',paddingLeft:'10px',height:'42px'},
          formatter:value=>format.numSecond(value/1000)
        }
      ], // netGridColumns
      netGridDataStore:{
        loading:true
      }
    }; // $state

    this.gridApi = restPostApi({
      __url: 'http/stat/'+ BlueWare.appId + '/domain',
      appVersionId: ()=>BlueWare.appVersionId,
      dateType:()=>this.container.dateType
    });
  }

  $load() {
    this.gridApi.fetch().done((data,prrams)=>{
      this.$state.netGridDataStore={data:data};
      this.container.emit();
    }).fail(error=>{
      this.$state.netGridDataStore={error};
      this.container.emit();
    }).progress(()=>{
      this.$state.netGridDataStore = {loading: true};

      this.container.emit();
    });
  }
}
